<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<!-- 
    如何在html页面中使用ES6模块化语法(ES6 Module)
    1. script引入外部JS文件 同时给脚本添加属性type="module" => 此脚本默认使用模块化语法
    2. 可以在一个js文件/脚本(type="module")中 引入另一个js 
       import "xxx"
       import {} from "xxx"  按需引入
 -->

<!-- <script src="../module/demo.js" type="module"></script> -->
<!-- <script type="module">
    // 按需引入  import {} from "xxx";
    import { a, addA } from "../module/demo1.js"; // ES6 模块中每一个js文件都是一个单独的模块 => 变量都是局部的
    console.log(a, addA); // 10

    addA();
    console.log(a);  // 11 


    import { b, addB } from "../module/demo2.js";
    console.log(b, addB); // 20

    addB();

    console.log(b); // 21 


    import { c, addC } from "../module/demo3.js";
    console.log(c, addC); // 30

    addC();

    console.log(c);


</script> -->

<script type="module">
    // 按需引入  import {} from "xxx";
    import { a, addA } from "../module/demo1.js"; // ES6 模块中每一个js文件都是一个单独的模块 => 变量都是局部的
    import { b, addB } from "../module/demo2.js";
    import { c, addC } from "../module/demo3.js";

    console.log(a, addA); // 10

    addA();
    console.log(a);  // 11 


    console.log(b, addB); // 20

    addB();

    console.log(b); // 21 



    console.log(c, addC); // 30

    addC();

    console.log(c);

</script>

</html>